<script lang="ts" setup>
import { defineProps, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { useMessage } from '@/hooks/useMessage'
const message = useMessage()

import UpdatePassword from './UpdatePassword.vue'

import { Login } from '@/api/index'

defineProps(['title', 'showBack'])
const { push } = useRouter()
//退出系统
const loginOut = () => {
  ElMessageBox.confirm('是否退出本系统？', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const user = localStorage.getItem('GREAT_WALL_USER') || ''
      const userID = JSON.parse(user)
      //调用退出接口
      const res = (await Login({
        inputStr: `OperType=Logout;$;UserID=${userID}`
      })) as any
      if (res.code !== 200) {
        message.error(res.msg)
        return
      }
      localStorage.removeItem('GREAT_WALL_USER')
      message.success('退出成功')
      //将Tab缓存清除
      // sessionStorage.setItem('WMS_ACTIVE_TAB', '')
      push({ path: '/login' })
    })
    .catch(() => {})
}

//修改密码
const updateRef = ref()
const changePW = () => {
  updateRef.value.open();
};
</script>
<template>
  <header class="text-center">
    <img class="logo" src="@/assets/logo.png" />
    {{ title }}
    <template v-if="showBack">
      <router-link to="/"
        ><button class="btn-back">
          <el-icon color="#448ACA" :size="18"><House /></el-icon></button
      ></router-link>
    </template>
    <!-- 定义一个作用域插槽  用来放LineType -->
    <slot name="lineType"></slot>
    <!-- 当前时间 -->
    <Current />
    <!-- 修改密码和退出登录 -->
    <el-dropdown placement="bottom" class="exit-button">
      <el-icon class="el-dropdown-link" color="#00F2F1"><SwitchButton /></el-icon>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="changePW"
            ><el-icon size="large" class="el-icon--right"><Key /></el-icon
            >修改密码</el-dropdown-item
          >
          <el-dropdown-item @click="loginOut"
            ><el-icon size="large" class="el-icon--right"><SwitchButton /></el-icon
            >退出系统</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </header>
  <UpdatePassword ref="updateRef" />
</template>
<style lang="less" scoped>
header {
  width: 100%;
  height: 66px;
  background: url('../assets/header-bg.png') no-repeat center center;
  background-size: 100% 100%;
  font-size: 30px;
  line-height: 66px;
  color: #fff;
  letter-spacing: 2px;
}
.btn-back {
  position: absolute;
  display: flex;
  width: 36px;
  height: 36px;
  left: 14px;
  top: 11px;
  align-items: center;
  justify-content: center;
  border: 1px solid #448aca;
  border-radius: 50%;
}
.line-type {
  position: absolute;
  left: 63px;
  top: 10px;
}

.logo {
  width: 200px;
  position: absolute;
  top: 3px;
  left: 40px;
}

.exit-button {
  position: absolute;
  right: 15px;
  top: 20px;
  cursor: pointer;
}

:deep(.exit-button .el-icon){
  font-size: 26px;
}
</style>
